<template>
  <!-- 首页 -->
  <div class="app-container home">
    <div class="home-content">
      <div ref="homeContentLeft" class="home-content-left">
        <div class="home-content-left-item">
          <el-card>
            <div class="home-content-title">企业信息</div>
            <table class="table">
              <tbody>
                <tr>
                  <td class="title-color">企业信息</td>
                  <td>{{ informationData.isCompleteEnterpriseInfo == true ? '已完成' : '未完成' }}</td>
                </tr>
                <tr>
                  <td class="title-color">现有车辆</td>
                  <td>{{ informationData.existingVehicle + '台' }}</td>
                </tr>
                <tr>
                  <td class="title-color">运行车辆</td>
                  <td>{{ informationData.runningVehicle + '台' }}</td>
                </tr>
                <tr>
                  <td class="title-color">现有船舶</td>
                  <td>{{ informationData.existingShip + '艘' }}</td>
                </tr>
                <tr>
                  <td class="title-color">运行船舶</td>
                  <td>{{ informationData.runningShip + '艘' }}</td>
                </tr>
                <tr>
                  <td class="title-color">注册员工</td>
                  <td>{{ informationData.registeredStaff + '人' }}</td>
                </tr>
                <tr>
                  <td class="title-color">企业评定等级</td>
                  <td>{{ informationData.enterpriseCreditLevel == '1' ? 'AA' : informationData.enterpriseCreditLevel == '2' ? 'A' : informationData.enterpriseCreditLevel == '3' ? 'B' : informationData.enterpriseCreditLevel == '4' ? 'C' : informationData.enterpriseCreditLevel == '5' ? 'D' : '无' }}</td>
                </tr>
              </tbody>
            </table>
            <div class="home-content-title" style="margin-top: 16px">证件情况</div>
            <table class="table-two">
              <tbody>
                <tr>
                  <td class="title-color">公司许可证</td>
                  <td>{{ informationData.certificateSituation == 'EXPIRED' ? '过期' : informationData.certificateSituation == 'TEMPORARY' ? '临期' : informationData.certificateSituation == 'NORMAL' ? '正常' : '' }}</td>
                </tr>
              </tbody>
            </table>
          </el-card>
        </div>
      </div>
      <baidu-map class="bm-view" center="天津市滨海新区" :zoom="zoom" scroll-wheel-zoom @ready="handler">
        <bm-boundary name="天津市滨海新区" :stroke-weight="3" stroke-style="dashed" stroke-color="blue" fill-color="" />
        <bm-marker
          v-for="(item,index) in markerPoint"
          :position="item"
          :icon="{url: require('../assets/images/cheliang.png'), size: {width: 24, height: 24}}"
          @click="handlerCar(item)"
        />
      </baidu-map>
    </div>
    <div class="list-content">
      <div class="list-content-group">
        <div class="list-content-group-item">
          <el-card class="list-card-first">
            <div class="tltle-content">
              <div class="title-span">最新公告</div>
              <div class="more-span" @click="more('notice')">更多 ></div>
            </div>
            <div class="list-table">
              <el-table
                :data="noticeList"
                border
                @row-click="noticeRowClick"
              >
                <el-table-column prop="publishTitle" label="标题" :show-overflow-tooltip="true" />
                <el-table-column prop="releaseTime" label="日期" width="140" />
              </el-table>
            </div>
          </el-card>
        </div>
        <div class="list-content-group-item-second">
          <el-card class="list-card-second">
            <div class="tltle-content">
              <div class="title-span">最新政策法规</div>
              <div class="more-span" @click="more('policy')">更多 ></div>
            </div>
            <div class="list-table">
              <el-table
                :data="typeList"
                border
                @row-click="regulRowClick"
              >
                <el-table-column prop="publishTitle" label="标题" :show-overflow-tooltip="true" />
                <el-table-column prop="releaseTime" label="日期" width="140" />
              </el-table>
            </div>
          </el-card>
        </div>
        <div class="list-content-group-item">
          <el-card class="list-card-three">
            <div class="tltle-content">
              <div class="title-span">最新问题反馈</div>
              <div class="more-span" @click="more('feedback')">更多 ></div>
            </div>
            <div class="list-table">
              <el-table
                :data="problemList"
                border
                @row-click="problemRowClick"
              >
                <el-table-column prop="serviceTitle" label="标题" :show-overflow-tooltip="true" />
                <el-table-column prop="createTime" label="日期" width="140" />
                <el-table-column prop="isReply" label="是否反馈" width="140">
                  <template slot-scope="scope">
                    <span>{{ scope.row.isReply == 1 ? '未反馈' : '已反馈' }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <el-dialog class="car-dialog" title="车辆详情" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="牌照：" prop="selfNumber">
              <span>{{ form.currentCarNum }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车型：" prop="selfNumber">
<!--              <span>{{ form.industryType }}</span>-->
              <dict-tag :options="dict.type.bhxq_car_industry_type" :value="form.industryType" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货运物资：" prop="selfNumber">
              <span>{{ form.goodsName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起始地：" prop="selfNumber">
              <span>{{ form.startAddress }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="目的地：" prop="selfNumber">
              <span>{{ form.endAddress }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 查看详情对话框 -->
    <el-dialog title="查询详情" :visible.sync="detail" width="800px" append-to-body :close-on-click-modal="false">
      <div class="dialog-content">
        <div class="title-content">
          <div>
            <span class="content-span">{{ this.detailData.type === 'problem' ? this.detailData.serviceTitle : this.detailData.publishTitle }}</span>
            <span v-if="this.detailData.informationType !== undefined">{{ '(' + this.detailData.informationType + ')' }}</span>
          </div>
        </div>
        <div v-if="this.detailData.type !== 'problem'" class="release-conteng">
          <div style="padding-right: 20px">发布人：{{ this.detailData.pubByName }}</div>
          <div style="padding-left: 20px">发布时间：{{ this.detailData.releaseTime }}</div>
        </div>
        <hr>
        <div class="content-detail">{{ this.detailData.type == 'problem' ? this.detailData.serviceContent : this.detailData.pubContent }}</div>
        <div class="file-content">
          <div class="file-title">附件：</div>
          <div v-if="this.detailData.type === 'problem'" class="file-name-content">
            <div v-for="item in fileData" class="file-name" @click="problemDownload(item)">{{ item.fileName + ' ' }}</div>
          </div>
          <div v-if="this.detailData.type !== 'problem'" class="file-name-content">
            <div v-for="item in fileData" class="file-name" @click="regulAnnounceDownload(item)">{{ item.fileName + ' ' }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { carList, carListInforma } from '@/api/homePage'
import { announceList } from '@/api/announcement'
import { reguDetail, regulList } from '@/api/policiesRegul'
import { problemDetail, problemList } from '@/api/problemFeedback'
export default {
  name: 'Index',
  dicts: ['bhxq_car_industry_type'],
  data() {
    return {
      zoom: 11,
      BMap: null,
      map: null,
      markerPoint: [], // 地图点位数组
      form: {},
      open: false,
      detail: false,
      // 企业信息数据
      informationData: {
        isCompleteEnterpriseInfo: true,
        existingVehicle: '',
        runningVehicle: '',
        existingShip: '',
        runningShip: '',
        registeredStaff: '',
        enterpriseCreditLevel: '',
        certificateSituation: ''
      },
      noticeList: [], // 最新公告数据
      typeList: [], // 最新政策法规数据
      problemList: [], // 最新问题反馈数据
      detailData: {
        pubByName: '', // 发布人
        publishTitle: '', // 发布标题
        pubContent: '', // 发布内容
        releaseTime: '', // 发布时间
        informationType: '', // 类型
        files: [], // 文件
        reply: '', //
        replayFiles: [], // 反馈信息附件列表
        serviceTitle: '',
        serviceContent: '',
        type: ''
      },
      fileData: [],
      replayFiles: []
    }
  },
  mounted() {
    // this.markerPoint = [{ lng: '117.777222', lat: '39.004369' }]
    this.getCarList() // 获取全部车辆信息
    this.getInformation() // 获取企业信息
    this.getList()
  },
  methods: {
    /** 获取公告详情 */
    noticeRowClick(row) {
      console.log('row', row)
      reguDetail(row.id).then(response => {
        this.detailData = response.data
        this.detailData.pubContent = response.data.pubContent.replace(/<p\s*\/?>/g, '')
        this.detailData.pubContent = this.detailData.pubContent.replace(/<br\s*\/?>/g, '')
        this.detailData.pubContent = this.detailData.pubContent.replace(/<\s*\/?p>/g, '')
        this.fileData = response.data.files
        console.log('response.data.files', response.data.files)
        this.detail = true
      })
    },
    /** 获取政策法规详情 */
    regulRowClick(row) {
      console.log('row', row)
      reguDetail(row.id).then(response => {
        this.detailData = response.data
        this.detailData.pubContent = response.data.pubContent.replace(/<p\s*\/?>/g, '')
        this.detailData.pubContent = this.detailData.pubContent.replace(/<br\s*\/?>/g, '')
        this.detailData.pubContent = this.detailData.pubContent.replace(/<\s*\/?p>/g, '')
        this.fileData = response.data.files
        this.detailData.type = 'regul'
        console.log('response.data.files', response.data.files)
        this.detail = true
      })
    },
    /** 获取问题反馈详情 */
    problemRowClick(row) {
      console.log('row', row)
      problemDetail(row.id).then(response => {
        this.detailData = response.data
        this.fileData = response.data.serviceFiles
        this.replayFiles = response.data.replayFiles
        this.detailData.type = 'problem'
        console.log('response.data.files', response.data.files)
        this.detail = true
      })
    },

    /** 问题反馈文件下载 */
    problemDownload(data) {
      console.log('data', data)
      window.open(process.env.VUE_APP_RESOURCE_PREFIX + data.fileUrl)
    },
    /** 公告 政策法规文件下载 */
    regulAnnounceDownload(data) {
      console.log('data', data)
      window.open(process.env.VUE_APP_RESOURCE_PREFIX + data.path)
    },
    /** 获取最新公告，最新政策法规，最新问题反馈方法 */
    getList() {
      announceList({ pageNum: 1, pageSize: 5 }).then(response => {
        this.noticeList = response.rows
      })
      regulList({ pageNum: 1, pageSize: 5 }).then(response => {
        this.typeList = response.rows
      })
      problemList({ pageNum: 1, pageSize: 5 }).then(response => {
        this.problemList = response.rows
      })
    },
    /** 更多按钮点击操作 */
    more(type) {
      if (type === 'notice') {
        this.$router.push('/announcement/index')
      } else if (type === 'policy') {
        this.$router.push('/policiesRegul/index')
      } else if (type === 'feedback') {
        this.$router.push('/problemFeedback/index')
      }
    },
    /** 车辆图标按钮点击操作 */
    handlerCar(data) {
      this.form = data
      console.log('data', data)
      this.open = true
    },
    /** 获取全部车辆信息方法 */
    getCarList() {
      carList().then(response => {
        console.log('response.data', response.data)
        this.markerPoint = response.data
      })
    },
    /** 获取企业首页信息 */
    getInformation() {
      carListInforma().then(response => {
        this.informationData = response.data
        console.log('informationData', this.informationData)
      })
    },
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  position: relative;
  .main-wrapper{
    width: 1920px;
    height: 1080px;
    box-sizing: border-box;
  }
  .home-header{
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    display: flex;
    .home-title{
      width: 516px;
      font-size: 32px;
      font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 36px;
      letter-spacing: 6px;
      padding: 30px 0 44px 0;

    }
    .home-header-left,.home-header-right{
      margin-top: 50px;
      padding: 0 30px;
    }
  }
  .home-content{
    display: inline-block;
    position: relative;
    width: 70%;
    //height: calc(1080px - 109px);
    height: 100%;
    overflow: hidden;
    .home-content-left{
      width: 33.3%;
      height: 100%;
      position: absolute;
      left:0;
      z-index: 100;
      padding: 14px 24px;
      transition: left 1s;
      .home-content-left-item{
        height: 100%;
        .home-content-title {
          font-size: 16px;
          font-weight: bold;
          color: #1890FF;
        }
      }
    }
    .home-content-right{
      width: 33.3%;
      height: 100%;
      top: 0;
      right: 0;
      position: absolute;
      z-index: 100;
      padding: 14px 24px;
      transition: right 1s;
      .home-content-right-item{
        height: 100%;
      }
    }
  }
  .list-content {
    padding-left: 20px;
    width: 30%;
    height: 100%;
    vertical-align: top;
    display: inline-block;
    .list-content-group {
      display: contents;
      .list-content-group-item {
        height: 33%;
        .list-card-first {
          height: 100%;
          padding-bottom: 10px;
          .tltle-content {
            display: flex;
            justify-content: space-between;
            .title-span {
              font-weight: bold;
              font-size: 16px;
              color: #1890FF;
            }
            .more-span {
              font-size: 14px;
              color: #676A6C;
              cursor: pointer;
            }
          }
          .list-table {
            height: inherit;
            overflow-y: scroll
          }
        }
        .list-card-three {
          height: 100%;
          padding-top: 10px;
          .tltle-content {
            display: flex;
            justify-content: space-between;
            .title-span {
              font-weight: bold;
              font-size: 16px;
              color: #1890FF;
            }
            .more-span {
              font-size: 14px;
              color: #676A6C;
              cursor: pointer;
            }
          }
          .list-table {
            height: inherit;
            overflow-y: scroll
          }
        }
      }
      .list-content-group-item-second {
        height: 33%;
        padding: 10px 0px;
        .list-card-second {
          .tltle-content {
            display: flex;
            justify-content: space-between;
            .title-span {
              font-weight: bold;
              font-size: 16px;
              color: #1890FF;
            }
            .more-span {
              font-size: 14px;
              color: #676A6C;
              cursor: pointer;
            }
          }
          height: 100%;
          .list-table {
            height: inherit;
            overflow-y: scroll
          }
        }
      }
    }
  }
  ::v-deep .el-card .el-card__body {
    height: inherit;
  }
  // 隐藏滚动条
  ::-webkit-scrollbar {
    width: 0px;
  }
  // 列表行高内边距
  ::v-deep .el-table--medium .el-table__cell {
    padding: 6px 0;
  }
    .bm-view {
    width: 100%;
    height: 100%;
  }
  // 去除百度地图的图标 根据实际情况看是否要加样式穿透(::v-deep)
  .anchorBL {
    display: none !important;
  }
}
.table {
  width: 100%;
  border-collapse: collapse;
  color: #606266;
  font-size: 14px;
  .title-color {
    color: #606266;
  }
}

.table td {
  text-align: center;
  border: 1px solid #ddd;
  height: 35px;
  width: 140px;
}

.table tr {
  text-align: center;
  background-color: #f9f9f9;
  height: 35px;
}
.table tr:nth-child(6n + 1),
.table tr:nth-child(6n + 3),
.table tr:nth-child(6n + 5) {
  background-color: #ffffff;
}

.table tr:nth-child(6n + 2),
.table tr:nth-child(6n + 4),
.table tr:nth-child(6n + 6) {
  background-color: rgb(245, 247, 250);
}
.table-two {
  width: 100%;
  border-collapse: collapse;
  color: #606266;
  font-size: 14px;
}
.table-two td {
  text-align: center;
  border: 1px solid #ddd;
  height: 35px;
  width: 140px;
}

.table-two tr {
  text-align: center;
  background-color: #f9f9f9;
  height: 35px;
}
.table-two tr:nth-child(6n + 1),
.table-two tr:nth-child(6n + 2) {
  background-color: #ffffff;
}

.dialog-content {
  .title-content {
    text-align: center;
    margin-bottom: 14px;
    .content-span {
      font-size: 18px;
      font-weight: bold;
      display: inline
    }
  }
  .content-detail {
    margin-bottom: 14px;
    height: 300px;
    overflow-y: scroll;
  }
  .file-content {
    display: inline-block;
    .file-title {
      display: inline-block;
      vertical-align: top;
    }
    .file-name-content {
      display: inline-block;
      .file-name {
        color: #20a0ff;
        cursor: pointer;
        margin-bottom: 4px
      }
    }
  }
  .release-conteng {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px
  }
}
</style>

